<template>
  <div>
    <!-- 头 -->
    <div class="heads">
      <h2>
        视频调阅:
        <!-- {{ tableData }} -->
      </h2>
    </div>
    <el-divider></el-divider>
    <!-- 表格 -->
    <div class="retrievetable">
      <el-table :data="facevideo.list" border @row-click="rowClick">
        <el-table-column
          prop="applCde"
          label="客户申请流水号"
          align="center"
        ></el-table-column>

        <el-table-column prop="videoUrl" label="视频编号" align="center">
          <template slot-scope="{ row }">
            <el-link v-model="row.videoUrl" type="primary">{{
              row.videoUrl
            }}</el-link>
          </template>
        </el-table-column>

        <el-table-column
          prop="agentId"
          label="座席编号"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="answerTime"
          label="开始时间"
          align="center"
        ></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
        v-if="facevideo.paging"
      >
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="facevideo.page.page"
          :page-size="facevideo.page.pageSize"
          layout="total, prev, pager, next"
          :total="facevideo.page.total"
          :small="true"
        >
        </el-pagination>
      </el-row>
    </div>
    <!-- 视频 -->
    <div class="footer-video" style="margin-top: 2rem;">
      <video
        controls
        :src="videoInfo.src"
        @error="handleVideoError"
        class="fill-container"
      >
        <!-- {{ videoInfo.msg }} -->
      </video>
    </div>
    <!-- 返回 -->
    <div class="footer-back">
      <el-button type="primary" @click="gobackretrieve()" size="mini"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import { queryInfofaceuserinfo2 } from "@/api/hubeixiaojin/queryInfo";
// import {} from "@/api/";
export default {
  name: "videoretrieve",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      facevideo: {
        list: [
          // {
          //   questionTitle: "1111",
          //   answer: "1001",
          //   time: "2020-01-01 12:00:00",
          //   remark: "http://www.w3school.com.cn/i/movie.mp4"
          // },
          // {
          //   questionTitle: "2222",
          //   answer: "1002",
          //   time: "2020-01-01 12:00:00",
          //   remark: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          // },
          // {
          //   questionTitle: "3333",
          //   answer: "1003",
          //   time: "2020-01-01 12:00:00",
          //   remark: "http://vjs.zencdn.net/v/oceans.mp4"
          // }
        ],
        paging: false,
        page: {
          total: 0,
          pageSize: 10,
          page: 1
        }
      },
      videoInfo: {
        src: "",
        msg: "您的浏览器不支持视频标签。"
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      } //调单用到的座席信息
    };
  },
  mounted() {
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
    this.getinfo();
  },
  methods: {
    //获取数据  视频历史
    getinfo() {
      console.log("视频历史", this.tableData);
      var params = {
        sortCol: "id",
        condition: {
          applSeq: this.tableData.applSeq
          // id: this.tableData.id
        } //申请状态
      };
      queryInfofaceuserinfo2(params, this.agentInfo)
        .then(res => {
          // console.log("接口返回==", res.data.data);
          var arrlist = [];
          var data = [];
          var applCde = res.data.data.listData[0].applCde;
          var agentId = res.data.data.listData[0].agentId;

          res.data.data.listData.forEach(element => {
            // 面签数据有listSessionDetail数组
            console.log("element==", element);
            if (
              element.listSessionDetail &&
              element.listSessionDetail.length > 0
            ) {
              // 获取listSessionDetail数组内的faceInteSessionInfo
              element.listSessionDetail.forEach(el => {
              data.push(el.faceInteSessionInfo);
              });
            }
          });
          data.forEach(element => {
            element.applCde = applCde;
            element.agentId = agentId;
            arrlist.push(element);
          });

          this.facevideo.list = arrlist;
        })

        .catch(err => {
          console.log(err);
        });
    },
    gobackretrieve() {
      console.log("返回到列表首页");
      //返回数据搜索页
      this.$emit("gobackretrieve");
    },
    // 分页
    handleCurrentChange(newPage) {
      console.log("分页", newPage);
    },
    //点击数据，展示视频val
    rowClick(val) {
      // console.log("获取点击视频", val.videoUrl);
      this.loadVideoSource(val.videoUrl);
    },
    //视频报错
    handleVideoError(event) {
      console.error("视频加载出错:", event.target.error);
    },
    async loadVideoSource(videoSrc) {
      this.videoInfo.src = videoSrc;
      // 等待视频加载完成后再尝试播放
      // await this.$nextTick();
      // const videoPlayer = this.$refs.videoPlayer;
      // console.log("videoPlayer==", videoPlayer);
      // if (videoPlayer.readyState >= 2) {
      //   // HAVE_CURRENT_DATA 或更高
      //   videoPlayer.play();
      // } else {
      // videoPlayer.addEventListener("canplay", () => {
      //   videoPlayer.play();
      // });
      // }
    }
  }
};
</script>

<style>
.footer-video {
  width: 100%;
  height: 300px;
  position: relative;
}
.fill-container {
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer-back {
  display: flex;
  justify-content: end;
}
</style>
